import 'package:syria_sports/core/app_export.dart';
import '../../../../widgets/app_bar/appbar_subtitle.dart';
import '../../../../widgets/app_bar/custom_app_bar.dart';
import '../../../../widgets/app_bar/outline_icon_button.dart';
import '../../../../widgets/screen_state_widget.dart';
import '../../add_sport/bloc/add_sport_page_screen.dart';
import '../widgets/sport_item_view.dart';
import 'sports_cubit.dart';
import 'package:flutter/material.dart';

class SportsScreen extends StatelessWidget {
  const SportsScreen({Key? key}) : super(key: key);

  static Widget builder({required BuildContext context}) {
    return BlocProvider<SportsCubit>(
        create: (context) => SportsCubit(
              SportsInitial(),
            )..add(SportsInitialEvent()),
        child: const SportsScreen());
  }

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(ImageConstant.imgBackground),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        appBar: _buildAppBar(context: context),
        body: BlocConsumer<SportsCubit, SportsState>(
          listener: (context, state) {
            // TODO: implement listener
          },
          buildWhen: (previous, state) {
            return state is SportsDone ||
                state is SportsDone ||
                state is SportsLoading;
          },
          builder: (context, state) {
            var cubit = SportsCubit.get(context);

            return Container(
              height: height,
              width: width,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(ImageConstant.imgBackground),
                  fit: BoxFit.cover,
                ),
              ),
              child: ScreenStateWidget(
                isDone: state is SportsDone,
                isError: state is SportsError,
                isLoading: state is SportsLoading,
                onRefresh: cubit.onRefresh,
                onDone: BlocBuilder<SportsCubit, SportsState>(
                  buildWhen: (p, c) {
                    return c is SelectModeUpdate;
                  },
                  builder: (context, gridState) {
                    return GridView.builder(
                      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 100,
                      ),
                      itemCount: cubit.sports.length,
                      itemBuilder: (BuildContext ctx, index) {
                        return BlocBuilder<SportsCubit, SportsState>(
                          buildWhen: (pState,cState){
                            return cState is SelectSport &&
                                cState.sport.sportId ==
                                    cubit.sports[index].sportId;
                          },
                           builder: (context, stateItem) {
                          return SportItemView(
                            sport: cubit.sports[index],
                            isSelected:cubit.selectedSports.contains(cubit.sports[index]),
                          );
                        });
                      },
                    );
                  },
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  /// Section Widget
  PreferredSizeWidget _buildAppBar({required BuildContext context}) {
    return CustomAppBar(
      actions: [
        /*OutlineIconButton(
            icon: Icons.add,
            margin:const EdgeInsets.all(8),
            padding:const EdgeInsets.all(2),
            onTapped: ()async{
              await Navigator.push(context, MaterialPageRoute(builder: (context) => const AddSportPageScreen()));
            },
          ),*/
        if (PrefUtils.isAdmin())
          BlocBuilder<SportsCubit, SportsState>(buildWhen: (p, c) {
            return c is SelectModeUpdate;
          }, builder: (context, state) {
            if (state is SelectModeUpdate && state.mode) {
              return OutlineIconButton(
                icon: Icons.close,
                margin: const EdgeInsets.all(8),
                padding: const EdgeInsets.all(2),
                onTapped: () {
                  SportsCubit.get(context).add(SelectModeEvent(mode: false));
                },
              );
            }

            return OutlineIconButton(
              icon: Icons.add,
              margin: const EdgeInsets.all(8),
              padding: const EdgeInsets.all(2),
              onTapped: () async {
                await Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const AddSportPageScreen()));
              },
            );
          }),
      ],
      leading: OutlineIconButton(
        imagePath: ImageConstant.imgRightIcon,
        onTapped: () {
          Navigator.pop(context);
        },
      ),
      title: AppbarSubtitle(
        text: "الرياضات",
        margin: EdgeInsets.only(left: 12.h),
      ),
    );
  }
}
